import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import {Tags, Tag} from './Tags.tsx';

<Meta
  title="Components/Tags"
  component={Tags}
  argTypes={{}}
  args={{}}
/>

# Tags

## Usage

Tags can be used to display a list of keywords.

A `Tags` element can only accept a list of `Tag` children.

Each Tag must have one `tint` attribute that you can pick in that list: `'green' | 'blue' | 'dark_blue' | 'purple' | 'dark_purple' | 'yellow' | 'red' | 'dark_cyan' | 'forest_green' | 'olive_green' | 'hot_pink' | 'coral_red' | 'orange' | 'chocolate'`

## Playground

<Canvas>
  <Story name="Standard">
    {args => {
      return <Tags {...args}>
        <Tag tint='red'>Red</Tag>
        <Tag tint='blue'>Blue</Tag>
        <Tag tint='dark_blue'>Dark Blue</Tag>
        <Tag tint='purple'>Purple</Tag>
        <Tag tint='dark_purple'>Dark Purple</Tag>
        <Tag tint='green'>Green</Tag>
        <Tag tint='forest_green'>Forest Green</Tag>
        <Tag tint='olive_green'>Olive Green</Tag>
        <Tag tint='dark_cyan'>Dark Cyan</Tag>
        <Tag tint='hot_pink'>Hot Pink</Tag>
        <Tag tint='coral_red'>Coral Red</Tag>
        <Tag tint='chocolate'>Chocolate</Tag>
        <Tag title='custom title' tint='yellow'>Yellow</Tag>
        <Tag tint='orange'>Very very very very looooonnnnnng teeeexxt</Tag>
      </Tags>;
    }}
  </Story>
</Canvas>

<ArgsTable story="Standard" />
